import React, {FunctionComponent} from 'react';
import {Form} from "antd";
import * as API from "@/services";
import {DEFAULT_FORM_FLEX_LAYOUT, KfBizQuickFormProps, KfFloatingContextProps, KfQuickForm, KfRemoteSelect} from "kf-web-library";

const FormItem = Form.Item;

type DataFormProps = {
    ids: API.EntityId[],
    type: "IMG" | "VIDEO",
} & KfBizQuickFormProps & KfFloatingContextProps;

const MoveQuickForm: FunctionComponent<DataFormProps> = (props) => {

    const {formType, ids, type, ...rest} = props;

    return (
        <KfQuickForm
            formType={formType}
            formProps={{
                ...DEFAULT_FORM_FLEX_LAYOUT
            }}
            submitRequest={{
                "move": (formValues) => API.moveMaterials({...formValues, ids} as API.Material_Move)
            }}
            {...rest}
        >
            <FormItem name={nameof<API.Material_Move>((x) => x.toGroupId)} label="移动至分组" rules={[{required: true}]}>
                <KfRemoteSelect
                  optionsRequest={() => API.queryMaterialGroups({types: [type], pageSize: 1000})
                        .then((resp) => {
                            return new Promise((resolve, reject) => {
                                if (resp.flag) {
                                    resolve(resp.data.map((entity) => {
                                        return {
                                            label: entity.name,
                                            value: entity.id,
                                        };
                                    }))
                                }
                                reject();
                            })
                        })}
                    {...props}
                />
            </FormItem>

        </KfQuickForm>
    );
};

export default MoveQuickForm;
